<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Umhlanga Surf Cam</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jsmpeg/0.1/jsmpg.js"></script>

  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-72761429-2"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    gtag('js', new Date());

    gtag('config', 'UA-72761429-2');
  </script>

</head>
<style>
  canvas {
    height: 480px;
    width: 960px;
    margin: auto;
    position: relative;
    display: block;
    z-index: -1;
  }

  #message {
    font-family: sans-serif;
    width: 100%;
    text-align: center;
    margin: auto;
    padding: 5px;
    border-radius: 3px;
  }

  .container {
    position: relative;
    width: 960px;
    height: 480px;
    z-index: 1;
    margin: auto;
    border: 1px solid black;
    background: #25c4f7;
  }

  @media only screen and (max-width: 600px) {
    .container {
      width: 100%;
      height: 179px;
      border: none;
    }

    canvas {
      width: 100%;
      height: auto;
    }

    #open {
      height: 120px !important;
      top: 28px !important;
    }

    .fullScreen {
      width: 25% !important;
    }
    
    .notWorking {
      width: 50% !important;
    }
  }

  .topRight {
    position: absolute;
    width: 100px;
    top: 0;
    display: none;
  }

  #open {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    background: url('/img/arrow.png') no-repeat;
    background-position: center;
    cursor: pointer;
  }

  #open:active {
    opacity: 0.5;
  }

  .hide {
    display: none;
  }

  #getting {
    position: absolute;
    top: 48%;
    margin: auto;
    bottom: 0px;
    left: 0;
    right: 0;
    width: 50%;
    text-align: center;
    font-family: sans-serif;
    z-index: -2;
  }

  .weather {
    display: flex;
  }

  .chunk {
    height: 80px;
    flex: 1;
    width: 20%;
    text-align: center;
  }

  .chunk p {
    font-family: sans-serif;
  }

  .chunk img {
    width: 10%;
  }

  .fullScreen {
    text-align: center;
    display: block;
    width: 20%;
    background: #64dcdc;
    padding: 5px;
    font-family: sans-serif;
    border-radius: 2px;
    margin: 3px auto;
    cursor: pointer;
  }
  
  
  .notWorking {
    text-align: center;
    display: block;
    width: 20%;
    padding: 5px;
    font-family: sans-serif;
    border-radius: 2px;
    margin: 3px auto;
    cursor: pointer;
    background: #ff6d00;
    color: #fff;
  }

  .advert {
    width: 100%;
    height: 90px;
    background: url(/img/TubeMasterLogo.png) no-repeat;
    background-size: 210px;
    background-position: center;
  }

  .fullScreen:active {
    background-color: #36cece;
  }

  @supports (-webkit-overflow-scrolling: touch) {
    .fullScreen {
      display: none;
    }
  }
  
  .flex {
    display: flex;
  }
  
  .flex50 {
    flex: 1;
  }
  
  .centerText {
    text-align: center;
    font-family: sans-serif;
    font-weight: 400;
    color: darkgrey;
  }
  
</style>

<body>

  <div id="fb-root"></div>
  <script>(function (d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.1&appId=479441145889808&autoLogAppEvents=1';
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>

  <div class="advert"></div>
  <h1 class="centerText">Umhlanga Surf Cam</h1>
  <div class="container">
    <canvas id="canvas"></canvas>
    <p id="getting" class="hide">Getting stream...</p>
    <div id="open"></div>
    <img class="topRight" src="http://www.pngall.com/wp-content/uploads/2016/06/Skull-High-Quality-PNG.png">
    <div class="flex">
      <div class="flex50">
        <a class="fullScreen">Full Screen</a>
      </div>
      <div class="flex50 errorMessage">
        <p id="message"><a class="notWorking">Camera not working?</a></p>
      </div>
    </div>
    <div class="weather"></div>
    <div class="fb-comments" data-href="http://umhlangasurfcam.co.za/" data-width="960" data-numposts="5"></div>
  </div>


  <script>
    var canvas = document.querySelector('canvas');
    var ctx = canvas.getContext("2d");

    // var ip = '10.0.0.3:8080';
    var ip = 'umhlangasurfcam.co.za';
    // var serviceAddress = '10.0.0.3:9797';
    var serviceAddress = '142.93.33.84/wsapp';
    // var serviceAddress = 'localhost:9797';

    var ws;
    var player;
    var hasLostFocus = false;
    var streamingStarted = false;

    window.onblur = (evt) => {
      if (!hasLostFocus) {
        streamingStarted = false;
        hasLostFocus = true;
        
        if (player) {
          player.client.close();
        }
        
        document.querySelector('#open').classList.remove('hide');
        document.querySelector('#getting').classList.add('hide');
        ctx.fillStyle = "rgba(0, 0, 0, 0.5)";
        ctx.fillRect(0, 0, canvas.width, canvas.height);
      }
    }

    function setupWS() {
      ws = new WebSocket(`ws://${serviceAddress}`);
      player = new jsmpeg(ws, {
        canvas: canvas
      });
      
//       ws.onopen = function(event) {
//         document.querySelector('.errorMessage').style = "display:none;";
//       };
    }
    
    async function sendNotWorkingMessage() {
      document.querySelector('#message').innerText = "........";
      
      await fetch('https://mattsfunctions.azurewebsites.net/api/HttpTrigger1?code=z9zPAsRbul9At3/XX8LH/JbQXrNowLkjojXomyO5I5RiHbe5OzArRQ==');
      
      document.querySelector('#message').innerText = "Thanks, I'm on it...";
      
      if (document.querySelector('.notWorking')) {
        document.querySelector('.notWorking').style = "display:none;";
      }
      
    }
    
    document.querySelector('.notWorking').addEventListener('click', (evt) => {
      sendNotWorkingMessage();
    });

    document.querySelector('.advert').addEventListener('click', (evt) => {
      window.open('http://rad-games.com');
    });

    document.querySelector('#open').addEventListener('click', (evt) => {
      hasLostFocus = false;
      evt.target.classList.add('hide');
      document.querySelector('#getting').classList.remove('hide');
      setupWS();
      streamingStarted = true;
    });

    document.querySelector('.fullScreen').addEventListener('click', evt => {

      if (!streamingStarted) {
        hasLostFocus = false;
        evt.target.classList.add('hide');
        document.querySelector('#getting').classList.remove('hide');
        setupWS();
      }

      var elem = document.querySelector("canvas");

      if (elem.requestFullscreen) {
        elem.requestFullscreen();
      } else if (elem.mozRequestFullScreen) {
        elem.mozRequestFullScreen();
      } else if (elem.webkitRequestFullscreen) {
        elem.webkitRequestFullscreen();
      } else if (elem.msRequestFullscreen) {
        elem.msRequestFullscreen();
      }

    });

    document.addEventListener("DOMContentLoaded", function (event) {

      var now = new Date();
      if (now.getUTCHours() >= 17 || now.getUTCHours() < 3) {
//         document.querySelector('#message').textContent = "Camera is offline from 19:00 - 05:00 South Africa time.";
//         document.querySelector('#open').classList.add('hide');
//         document.querySelector('#getting').classList.remove('hide');
//         document.querySelector('#getting').textContent = "Camera is offline from 19:00 - 05:00 South Africa time."
      } else {
        // var str = `As of ${new Date().toDateString()}, this service is in beta and will not always function as expected. The service will restart every hour.`;
        // document.querySelector('#message').textContent = str;
      }
    });
  </script>
</body>

</html>
